【第1012期】6种组织CSS的方法
前言
7月最后一天了。今日早读文章由@池盛星翻译投稿分享。
正文从这开始～
Ben Frain曾经说过, 写CSS容易, 扩展和维护难. 这篇文章介绍了一些解决方案的集合, 试图解决这个问题 .
OOCSS 面向对象 CSS
OOCSS是object-oriented CSS的缩写. 主要有两个意思:
结构和设计分离
容器和内容分离
使用这种结构, 开发人员获得可以在不同地方使用的CSS类.
通常这时候总是会有两个消息(一个好消息和一个不好的消息):
好消息: 通过复用来减少代码量(DRY原则)
不好的消息: 维护非常困难(复杂). 当你修改某一个具体的元素的样式的时候, 大部分情况下, 除了修改CSS本身(因为多数的CSS类是通用的), 你还不得不添加更多的标记类(markup).
另外, OOCSS本身并不提供具体的规则, 而是抽象的建议, 所以这种方法在生产中的最终结果会有所不同.
事实上, OOCSS的想法启发了其他人创建自己的, 更具体的代码结构化方式.
SMACSS 可扩展和模块化结构的 CSS
SMACSS是可扩展和模块化结构CSS的简称. 该方法的主要目标是减少代码量并简化代码维护.
Jonathan Snook把它归纳为5个部分:
基本规则(Base rules): 为网址的主要元素设置样式, 如body, input, button, ul, ol等. 在这一步中, 我们主要使用HTML标签和属性选择器, 在特殊情况下, 使用CSS类(如: 如果您有JavaScript-Style选择);
布局规则(Layout rules): 主要是些全局元素, 顶部, 页脚, 边栏等模块的大小. Jonathan建议使用ID选择器, 因为这些模块不太可能在同一个页面上出现多次. 然而, 本文作者认为这是个很不好的习惯(每当ID出现在样式文中, 感觉世界顿时变得灰暗, 有一股莫名的哀伤).
模块规则(Modules rules): 模块(类似于卡片布局)可以在一个页面中使用多次. 对于模块CSS类, 不建议使用ID和tag选择器(这是为了方便重用以及上下文独立).
状态规则(State rules): 在这一步中, 规定了模块的各种状态以及网站的基础部分. 这是唯一允许使用""的地方.
主题规则(Theme rules): 设计您可能需要更换的样式.
我们推荐为属于某个组的CSS类定义命名空间, 并为JavaScript中使用的CSS类使用单独的命名空间.
这种写法使编写和维护代码变得更加容易, 并吸引了大量开发人员.
Atomic CSS 原子 CSS
Atomic CSS是CSS架构的一种方法, 它的好处是写出基于视觉功能的小的, 单用途CSS类.
使用Atomic CSS, 为每个可重用的属性创建单独的CSS类. 例如, margin-top: 1px; 就可以创建一个类似于mt-1的CSS类, 或者width: 200px; 对应的CSS类为w-200.
这种样式允许您通过重用声明来最大程度地减少您的CSS代码数量, 并且也能很轻松的更改模块, 例如, 更改以技术任务时.
然而, 这种方法有很大的缺点:
CSS类名是属性名称的描述, 而不是元素的自然语义. 这种想象很容易使人在开发过程中变得迷茫. 开发本身也十分容易复杂化.
直接在HTML中进行显示设置.
由于这些短板的存在, 这种做法遭到了大量的批评. 然而, 这种做法对于大型项目来说是有一定效果的.
此外, Atomic CSS在各种框架中被用于校正元素样式以及某些层(layers)的其他方法.
MCSS 多层 CSS
MCSS指的是多层CSS(Multilayer CSS). 这种样式写法建议将样式分成多个部分, 每个部分称为层(layers).
第0层或基础(Zero layer or foundation), 负责重置浏览器样式的代码(如: reset.css或者normalize.css);
基层(Base layer), 包括可重用元素的样式: buttons, input, hints等等.
项目层(Project layer), 包括单独的模块和"上下文" - 根据用户端浏览器或用于浏览的设备, 用户权限等对元素的样式进行调整.
装饰层(Cosmetic layer), 使用OOCSS风格来书写样式, 对元素外观做微小的调整. 建议仅留下影响外观的风格, 而不能破坏网站的布局(例如颜色和非关键缩进等).
层与层之间的交互层次是非常重要的:
在基层(Base layer)中定义中性的样式, 并且不影响其它层.
基层(Base layer)中的元素只能影响基层的CSS类.
项目层(Project layer)中的元素可以影响基层和项目层.
装饰层(Cosmetic layer)是以描述性OOCSS类("atomic"类)的形式进行设计, 不会影响其他CSS代码, 而是在标记中有选择的使用.
AMCSS 属性模块 CSS
AMCSS是"属性模块CSS"的缩写.
先让我们来看一个例子:
<div class="button button--large button--blue">Button</div>
如果这样写CSS类的链, 是有点复杂的, 所以让我们通过属性来为这些CSS类分组. 分组后就变成下面这样了:
<div button="large blue">Button</div>
为了避免属性名称冲突, 好的方式是为属性加上命名空间. 然后, 我们的button代码就变成这样了:
<div am-button="large blue">Button</div>
如果您使用了验证器去检查你的代码, 并且它(验证器)不喜欢类似于am-button这样的属性名称, 你可以把属性的命名空间(am-)换成data-. 例如: data-button.
使用一个不是那么常用的选择器"~="(IE7以上都支持), 它类似于CSS类属性: 所有属性值包含指定的单词(以空格分开)的元素都会被选中. 所以, 选择器[class ~= "link"][class~= "button"]相对于选择器a.link.button. 这种选择器(选择方式)同样适用于属性.
因此, CSS代码就可以这样写:
/* CSS类选择器 */
.button { ... }
.button--large { ... }
.button--blue { ... }
/* CSS属性选择器 */
[am-button] { ... }
[am-button ~= "large"] { ... }
[am-button ~= "blue"] { ... }
如果您认为这段代码十分的不寻常, 可以尝试使用较为温和的AMCSS 形式:
<div am-button am-button-large am-button-blue>Button</div>
FUN
FUN代表的是"Flat hierarchy of selectors, Utility styles, Name-spaced components."
每个名称前面的字母都代表着一定的原则:
F, 选择器的扁平的层次结构: 建议使用CSS类选择元素(items), 避免不必要的级联, 杜绝使用id.
U, 实用(功能)样式: 鼓励创建原子(atomic)样式来解决典型的修正(微调)任务, 例如: w100表示width: 100%; 或者fr表示float: right;
N, 名称分割组件: Ben建议添加命名空间来指定特定模块元素的样式. 这种方法将避免类的中重叠.
一些开发人员注意到, 使用这种原则来编写CSS代码是非常方便和容易维护的; 在某种程度上, 作者汲取了SMACSS的精华, 以简单并且简洁的方式阐述了这一技术.
这种方式对项目和代码结构施加了很多的要求, 它仅仅建立了记录选择器的首选形式以及它们在标记中的使用方式. 但在小型项目中, 这些规则足以帮助构建高质量的CSS代码.
结论
正如你所看到的, 这些方法中没有哪一个是非常理想的. 因此, 并没有对所有人所有项目都适合的绝对的标准 - 你可以从这些方法中选择某一个开始, 创建某些属于你自己的东西. 亦或者完全重头开始建立一套你自己的标准 .
最后，他曾分享过：
关于本文
译者：@池盛星
译文：https://zhuanlan.zhihu.com/p/28085207
作者：@ Inessa Brown
原文：https://css-tricks.com/methods-organize-css/